<template>
  <div class="sql-editor"></div>
</template>

<script>
import { getMonaco, onMonacoResize } from "./editors/editor.core";
export default {
  async mounted() {
    const monaco = await getMonaco("vs/basic-languages/mysql/mysql");
    const $editor = monaco.editor.create(this.$el, {
      language: "mysql",
      fontSize: 18,
      theme: "vs",
      minimap: {
        enabled: false,
      },
      value: `
  select * from student
    where name = #{name}
      and age > #{age}
    order by age desc
`.trim(),
    });

    // onMonacoResize(this, () => $editor.layout());
  },
};
</script>

<style scoped>
.sql-editor {
  text-align: left;
  width: 100%;
  height: 100%;
  min-height: calc(100vh - 100px);
}
</style>
